<template>
  <div class="upload-container">
    <el-upload multiple
               class="upload-demo"
               accept=".png,.jpg,.docx,.doc,.xlsx,.xls,.pdf"
               :action="uploadImgUrl"
               list-type="text"
               :headers="headers"
               :on-remove="removeImage"
               :on-success="handleUploadSuccess"
               :before-upload="handleBeforeUpload"
               :on-error="handleUploadError"
               :file-list="fileList"
               drag>
      <i><img src="@/assets/images/message/Slice 35@2x.png"
             class="img"
             alt=""></i>
      <div class="el-upload__text">
        <p>点击或将文件拖到此处上传</p>
        <span>支持扩展名:{{ fileType.join("/") }}</span>
      </div>
      <div class="el-upload__tip"
           slot="tip"
           v-if="isShowTip">
        且不超过<b style="color: #f56c6c">{{ fileSize }}MB</b>
      </div>
      <template v-slot:file="{ file }">
        <span class="custom-file">
          <div>
            <img src="../../assets/images/upload.png"
                 alt="">
            <span class="file-name">{{ file.name }}</span>
          </div>

          <i class="el-icon-close"
             @click="removeImage(file,fileList,true)"></i>
        </span>
      </template>
    </el-upload>

  </div>

</template>

<script>

import { getToken } from "@/utils/auth";
export default {
  props: {
    // 大小限制(MB)
    value: {

    },
    data: {

    },
    fileSize: {
      type: Number,
      default: 3,
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true,
    },
  },
  data () {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileType: ["png", "jpg", "docx", "doc", "xls", "xlsx"],
      fileList: []
    };
  },
  watch: {
    value: {
      handler: function () {
        this.fileList = this.value
      }
    }
  },
  mounted () {
    var that = this;
    if (that.data) {
      that.data.forEach(item => {
        item.name = item.fileName
      })
      that.fileList = that.data
    }
  },
  methods: {
    handleRemove (file, fileList) {
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleUploadSuccess (res, file, fileList) {
      var that = this
      var fileList = [];
      fileList.push(file);
      this.fileList = fileList
      fileList.forEach(item => {
        if (!item.response.fileId) {
          item.id = item.response.fileId
        }
      })
      this.$emit("input", fileList);
      this.loading.close();
    },
    removeImage (file, fileList, open) {
      if (open) {
        const arr = fileList.filter(item => {
          return item.id !== file.id
        })
        // this.$set(this,"fileIdList", arr)
        // this.fileList = arr
        this.$emit("input", arr);
      } else {
        this.$emit("input", fileList);
      }

    },
    handleBeforeUpload () {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadError () {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
  }
}
</script>

<style lang="scss" scoped>
.el-upload-dragger {
  width: 300px;
  height: 248px;
  background-color: none;
}
.custom-file {
  height: 40px;
  display: flex;
  padding: 0 10px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  > div {
    display: flex;
    align-items: center;
  }
  img {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    margin-right: 10px;
  }
  .el-icon-close {
    line-height: 30px;
  }
}
.img {
  width: 43px;
  height: 43px;
  margin-top: 43px;
}

.el-upload__text {
  display: flex;
  flex-direction: column;
  margin-top: -14px;
  span {
    font-size: 12px;
  }

  p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #0b9eae;
    height: 22px;
  }
}
</style>
